<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
interface Iprops {
  routeArr: any[]
}
const props = defineProps<Iprops>()
const $emit = defineEmits(['MenuItemClickHandle'])
const $route = useRoute()

const curPath = ref<string>()
onMounted(() => {
  curPath.value = $route.name as string
})
// 点击事件
const MenuItemClickHandle = (item: any) => {
  curPath.value = item.name
  $emit('MenuItemClickHandle', item.path)
  // 路由跳转
}
</script>
<template>
  <div class="container">
    <div class="content">
      <el-row :gutter="20" class="elrow">
        <el-col :span="3">
          <div class="menu">
            <el-menu :default-active="curPath">
              <template v-for="item in props.routeArr" :key="item.path">
                <el-menu-item
                  :index="`${item.path}`"
                  @click="MenuItemClickHandle(item)"
                >
                  <div
                    :class="{
                      // selected: $route.path == `/hospital/${item.path}`,
                      selected: curPath == item.path,
                      item
                    }"
                  >
                    <icon-title></icon-title>
                    <span>
                      {{ item.meta.title }}
                    </span>
                  </div>
                </el-menu-item>
              </template>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="21">
          <router-view></router-view>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped lang="less">
.container {
  .content {
    margin: 20px 0;

    .menu {
      :deep(.el-row) {
        margin: 0 !important;
        padding: 0 !important;
      }
      .el-menu {
        position: sticky;
      }
      .el-menu-item {
        &:hover {
          background: none;
          font-weight: 700;
          color: var(--text-hover-color);
        }

        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          .icon {
            color: #fff;
          }
        }
        .selected {
          font-weight: bold;
          font-size: 16px;
          color: var(--primary-color);
          .icon {
            color: inherit;
          }
        }
      }
    }
  }
}
</style>
